Day15 - 把網頁架構變漂亮一點 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 15

DevOps

Golang X DevOps系列第 15 篇

Day15 - 把網頁架構變漂亮一點

14th鐵人賽

idisused

團隊大力出奇蹟

2022-09-24 22:03:25

620 瀏覽

分享至

讓結構變漂漂亮亮的

Keep Your main.go simple

前天我們把所有的東西全部都塞在一起
現在我們要讓他們每個分工明確一點

Controller, Entity Template

把你的資料夾變成下面這樣
永遠讓你的main.go 保持乾淨
template負責前端
entuty 定義傳輸資料的格式
controller負責傳遞資料給前端

GO_WEB/ # 示意圖
├── controller
│    └──homeController
├── entity
│    └──user.go
├── template
│    └──index.html
├── main.go

index.html

先來個簡單的，但我們想要讓他跟我們的傳遞的資料一樣
兩個大括號起來的會把傳遞的資料吃進來並且替換掉

<!DOCTYPE html>
<html>
<head><title>Iron Man</title></head>
<body>
    <h1>{{.Name}}</h1>
    <p>{{.Age}}</p>
    <p>{{.Introduce}}</p>
</body>
</html>

user.go

在 Go 裡面，使用 type 來對我們自己闖造的型別進行自訂義
在下面，我們定義了一個名為 User 的 Struct
並且分別對應每一個值在傳遞的時候 json 裡面的 key

package entity

type User struct {
	Name      string `json:"name"`
	Introduce string `json:"introduce"`
	Age       int    `json:"Age"`
}

homeController

第10行我們定義一個新的User 實體
然後 11, 12, 13對他賦值
最後透過 HTML() 去對 index.html 做渲染

package controller

import (
	"net/http"
	"github.com/gin-gonic/gin"
	"github.com/kevinjone25/go_web/entity"
)

func Home(c *gin.Context) {
	data := new(entity.User)
	data.Age = 18
	data.Introduce = "Hi! I'm Iron Man!!!"
	data.Name = "Iron Man"
	c.HTML(http.StatusOK, "index.html", data)
}

main.go

service.LoadHTMLGlob("template/*") 在告訴 server 說我應該要去那裡尋找渲染的檔案
然後我們寫一個 Route 並把 Contrller 的 method 包進來

package main

import (
	"github.com/gin-gonic/gin"
	"github.com/kevinjone25/go_web/controller"
)

func main() {
	server := gin.Default()
	server.LoadHTMLGlob("template/*")
	server.GET("/home", controller.Home)
	server.Run()
}